<template>
  <div>
    <div style="height:50px;line-height:50px;background:#eee">
      <span class="iconfont icon-left" style="padding:0 10px" @click="$router.go(-1)"></span>
      <span>实名认证</span>
    </div>
    <div>
      <van-field v-model="name" label="姓名" placeholder="姓名" />
      <van-field v-model="numberId" label="身份证号" placeholder="请输入身份证号" />
      <div class="uploaderSyt" @click="clickIndex=0">
        <span style="font-size:14px">身份证正面</span>
        <img v-if="positiveImg" :src="positiveImg" alt />
        <van-uploader v-if="!positiveImg" preview-size="65" :after-read="afterRead" />
      </div>
      <div class="uploaderSyt" @click="clickIndex=1">
        <span style="font-size:14px">身份证反面</span>
        <img v-if="sideImg" :src="sideImg" alt />
        <van-uploader v-if="!sideImg" preview-size="65" :after-read="afterRead" />
      </div>
    </div>
    <van-button @click="subMit()" block type="primary" style="position:absolute;bottom:0">提交</van-button>
  </div>
</template>
<script>
export default {
  data: () => ({
    name: null,
    numberId: null,
    uploader: [],
    positiveImg: null,
    sideImg: null,
    clickIndex: null
  }),
  methods: {
    afterRead(e) {
      //console.log(this.clickIndex);
      //console.log(e);
      let param = new FormData();
      let config = {
        headers: {
          Authorization:
            "bearer" + JSON.parse(this.$store.state.userInfo).access_token,
          "Content-Type": "form-data"
        }
      };
      param.append("files", e.file);
      this.$axios
        .post(`ym/oss-attachment/upload-image`, param, config)
        .then(res => {
          //console.log(res);
          if (res.data.code === 0) {
            let avatar = res.data.data[0].imgSrc;
            switch (this.clickIndex) {
              case 0:
                this.positiveImg = avatar;
                break;
              case 1:
                this.sideImg = avatar;
                break;
              default:
                //console.log("error");
            }
            //console.log(avatar);
          } else {
            //console.log("上传错误");
          }
        });
    },
    subMit() {
      if (this.name) {
        let data = {
          memberRealName: this.name,
          memberIdCard: this.numberId,
          memberIdCardFont: this.positiveImg,
          memberIdCardBack: this.sideImg
        };
        //console.log(data);
        this.$axios.post(`ym/memberuser/bind-idcard`, data).then(res => {
          if (res.data.code === 0) {
            this.$Toast("修改成功");
            this.$router.go(-1);
          } else {
            this.$Toast(res.data.msg);
          }
          //console.log(res);
        });
      } else {
        this.$Toast("名称不能为空");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.uploaderSyt {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #333;
  span {
    font-size: 14px;
    padding: 0 5px;
  }
  img {
    width: 72px;
    height: 72px;
  }
}
</style>